 <%
    var isAdd = false;
    var isEdit = false;
    if(isEmpty(SysUser.id)){
        isAdd = true;
    }else{  
        isEdit = true;
  }%>
  <% 
    var headContent = {
  %>
  <script type="text/javascript" src="${base}/template/lhgdialog/lhgdialog.min.js"></script>
  <script type="text/javascript" src="${base}/template/common/js/rsa/jsencrypt.min.js"></script>
  <link rel="stylesheet" href="${base}/template/common/css/tree/amazeui.tree.css"/>
  <style type="text/css">
 /*验证：提示信息样式 begin*/
   .am-alert-danger {
      background-color: transparent;
      border-color: transparent;
      color: red;
    }
    .am-alert {
      margin-bottom: 1em;
      padding: .625em;
      background: transparent;
      border: none;
      border-radius: 0;
    }
    /*验证：提示信息样式 end*/
}
 </style>
 <script type="text/javascript">
$(function(){
  $('#orgName').dialog({
      content: 'url:${base}/organization/dialog', 
      title: '机构选择', 
      lock: true,
      skin: "idialog",
      width: 800,
      height: 550,
      data: function (backdata) {
          if (backdata.length > 0) {
              $('#parentid').val(backdata[0].id);
              $('#orgName').val(backdata[0].name);
              $('#orgName')[0].focus();
          }
      }
  });
  $("#roleName").dialog({
      content: 'url:${base}/role/dialog', 
      title: '角色选择', 
      lock: true,
      skin: "idialog",
      width: 800,
      height: 550,
      data: function (backdata) {
          if (backdata.length > 0) {
              $('#roleId').val(backdata[0].id);
              $('#roleName').val(backdata[0].name);
              $('#roleName')[0].focus();
          }
      }
  });
  /*表单验证：begin*/
  //自定义规则，用法：验证元素上加class="js-pattern-sort"
  if ($.AMUI && $.AMUI.validator) {
    $.AMUI.validator.patterns.username = /^[0-9a-zA-Z_]\w{1,50}$/;
    $.AMUI.validator.patterns.mobile = /^1((3|5|8){1}\d{1}|70)\d{8}$/;
  }
  var $myField = null;
  var myMsg = "";
  $("#form").validator({
    // 域通过验证时回调
    onValid: function(validity) {
      $(validity.field).closest('.am-form-group').find('.am-alert').hide();
    },
    // 验证出错时的回调， validity 对象包含相关信息，格式通 H5 表单元素的 validity 属性
    onInValid: function(validity) {
      var $field = $(validity.field);
      var $group = $field.closest('.am-form-group');
      var $alert = $group.find('.am-alert');
      var msg = "";
      if($myField && myMsg && $field.val() && $field.is($myField)){
        msg = myMsg;
        $myField = null;
        myMsg = "";
      }else{
        // 使用自定义的提示信息 或 插件内置的提示信息
        msg = $field.data('validationMessage') || this.getValidationMessage(validity);
      }

      if (!$alert.length) {
        $alert = $("<div class='am-alert am-alert-danger'></div>").hide().
        appendTo($group.find(".input-msg"));
      }
      console.log("onInValid : "+$field.val());
      $alert.html(msg).show();
    },
    //自定义验证
    validate: function(validity) {
      var $field = $(validity.field);
      var v = $field.val();
      //if(validity.valid){
        if($field.is('#user-name')) {
          if(v && (v.length >= 2) && (!$.AMUI.validator.patterns.username.test(v))){
            $myField = $field;
            myMsg = "账号名由2-50个字母、数字、下划线组成"
            validity.valid = false;
          }
        }
        if($field.is('#confirm-password')) {
          if(v && (v != $('#password').val())){
            $myField = $field;
            myMsg = "两次密码输入不一致"
            validity.valid = false;
          }
        }
      //}
    }
  });
  /*表单验证：end*/
  $("#submit").on("click",function(){
	  var pwd = $("#password").val();
	  var encrypt = new JSEncrypt();
	  encrypt.setPublicKey("${publickey}");
	  var encryptedPwd = encrypt.encrypt(pwd);
	  $("#password").val(encryptedPwd);
	  $("#confirm-password").val(encryptedPwd);
      /*var action=$("#form").prop("action")
      +"?id="+$("#id").val()
      +"&isAccountEnabled="+($("#isLocked").prop("checked")?"1":"0")
      +"&user_name="+$("#user-name").val()
      +"&password="+$("#password").val()
      +"&real_name="+$("#realName").val()
      +"&telephone="+$("#telephone").val()
      +"&email="+$("#email").val()
      +"&org_id="+$("#parentid").val()
      +"&role_id="+$("#roleId").val();
      console.log(action);*/
      $("#isAccountEnabled").val($("#isLocked").prop("checked")?"1":"0");
      //document.location.href=action;
      $("#form").submit();
  });
});
</script>
 <%
};
%>
<%layout("/common/_layout.html",{head:headContent}){%>
<form id="form"  method="POST" class="am-form" action="<%if(isAdd){%>${base}/account/save<%}else{%>${base}/account/update<%}%>">
  <div class="am-cf am-padding">
    <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">账号管理</strong> / <small><%if(isAdd){%>添加账号<%}else{%>编辑账号<%}%></small></div>
  </div>
<input type="hidden" id="id" name="id" value="${SysUser.id!}" />
  <!--选项卡（tabs）begin-->
  <div class="am-tabs am-margin" data-am-tabs>
    <ul class="am-tabs-nav am-nav am-nav-tabs">
      <li class="am-active"><a href="#tab1"><%if(isAdd){%>添加账号<%}else{%>编辑账号<%}%></a></li>
    </ul>
    <div class="am-tabs-bd">
      <div class="am-tab-panel am-active" id="tab1">
          <!--验证表单元素（validate) begin-->
          <!--input begin-->
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
              <span  style="color: red;">*</span>所属角色：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
              <!-- <select data-am-selected id="roleId" placeholder="请选择" val="${roleId!}" >
                    <option value=""></option>
                    <%for(role in roles!){%>
                    <option value="${role.id}" <%if(role.id == roleId!){%>selected="selected"<%}%> >${role.name}</option>                   
                    <%}%> 
                  </select> -->
                  <input type="hidden" id="roleId" name="role_id" value="${roleId!}"/>  
                  <input type="text" class="am-input"  data-validation-message="所属角色不能为空" placeholder="请选择所属角色" id="roleName" readonly="readonly" value="${roleName!}" required/>
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg">
              <div class="am-alert am-alert-danger">${accountRoleMessages!}</div>
            </div>
          </div>
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
              <span  style="color: red;">*</span>所属机构：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
              <input type="hidden" id="parentid" name="org_id" value="${SysUser.org_id!}" />   
              <input type="text" class="am-input"  data-validation-message="所属机构不能为空" placeholder="请选择所属机构" id="orgName" readonly="readonly" value="${orgName!}" required/>
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
          </div>
          <div class="am-g am-form-group am-margin-top">
                <div class="am-u-sm-4 am-u-md-2 am-text-right">
                  <span  style="color: red;">*</span>是否禁用：
                </div>
                <div class="am-u-sm-6 am-u-md-6 switch-button">
                <input type="hidden" id="isAccountEnabled" name="isAccountEnabled" value="${isAccountEnabled!'1'}"/>
                <input id="isLocked" type="checkbox" data-size='xs' data-am-switch  data-off-text="已禁用" data-on-text="已启用" <%if(SysUser.isAccountEnabled! ==null||SysUser.isAccountEnabled! == true){%>checked="checked"<%}%> />
                 <!--  <label class="am-radio-inline">
                    <input data-am-ucheck name="islock"  type="radio" id="isLocked" <%if(SysUser.isAccountEnabled! ==false){%>checked="checked"<%}%> > 禁用
                  </label>
                  <label class="am-radio-inline">
                    <input type="radio" name="islock" data-am-ucheck required <%if(SysUser.isAccountEnabled! ==null||SysUser.isAccountEnabled! == true){%>checked="checked"<%}%> >启用
                  </label> -->
                  
                </div>
                <div class="am-u-sm-2 am-u-md-4 input-msg">
                  <div class="am-alert am-alert-danger">${accountOrgMessages!}</div>
                </div>
              </div>
          
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
              <span  style="color: red;">*</span>账号名：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
              <input class="js-pattern-username" type="text" id="user-name" name="user_name" value="${SysUser.user_name!}" <%if(isAdd){%><%}else{%>readonly="readonly"<%}%> minlength="2" maxlength="50" placeholder="请输入账号名（字母、数字、下划线，不能修改）" required/>
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg">
              <div class="am-alert am-alert-danger">${accountUserNameMessages!}</div>
            </div>
          </div>
          <%if(isAdd){%>
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
              <span  style="color: red;">*</span>账号密码：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
              <input type="password" id="password" name="password" value="${SysUser.password!}" placeholder="请输入账号密码（6-20位之间）" minlength="6" maxlength="20" required/>
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg">
              <div class="am-alert am-alert-danger">${accountPasswordMessages!}</div>
            </div>
          </div>
        <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
              <span style="color: red;">*</span>确认密码：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
              <input type="password" id="confirm-password"  value="${SysUser.password!}"  placeholder="请输入确认密码（6-20位之间）" minlength="6" maxlength="20" required/>
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
          </div>
          <%}%>
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">姓名：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
              <input type="text" id="realName" name="real_name" value="${SysUser.real_name!}" placeholder="请输入你的姓名" maxlength="50" />
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
          </div>
           <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">电话：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
              <input class="js-pattern-mobile" data-validation-message="电话号码格式不正确" type="text" id="telephone" name="telephone" value="${SysUser.telephone!}" placeholder="请输入你的电话" maxlength="11"/>
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
          </div>
           <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">邮箱：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
              <input data-validation-message="邮箱格式不正确" type="email" id="email" name="email" value="${SysUser.email!}" placeholder="请输入你的邮箱" maxlength="30" />
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
          </div>
          <!--验证表单元素（validate end-->
      </div>
      </div>
  </div>
  </form>
  <!--选项卡（tabs）end-->
  <div class="am-margin">
    <button type="button" id="submit" class="am-btn am-btn-primary am-btn-xs">提交保存</button>
    <button type="button" class="am-btn am-btn-warning am-btn-xs" onclick="window.history.back(); return false;">返回上一级</button>
  </div>

<%}%>